<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="850" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Draw Figure 甲 (Jia) on the left ---
        
        // Platform for the truck
        ctx.beginPath();
        ctx.moveTo(150, 100);
        ctx.lineTo(430, 100);
        ctx.stroke();

        // Pulley support structure
        ctx.beginPath();
        ctx.moveTo(150, 100);
        ctx.lineTo(150, 130);
        ctx.lineTo(120, 130);
        ctx.stroke();
        
        // Pulley
        ctx.beginPath();
        ctx.arc(120, 130, 10, 0, 2 * Math.PI);
        ctx.stroke();

        // Truck
        // Wheels
        ctx.beginPath();
        ctx.arc(220, 100, 10, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(280, 100, 10, 0, 2 * Math.PI);
        ctx.stroke();
        // Body
        ctx.strokeRect(190, 80, 120, 20);
        // Cab
        ctx.strokeRect(310, 60, 40, 40);

        // Water container
        ctx.strokeRect(50, 160, 200, 180);

        // Water
        ctx.beginPath();
        ctx.moveTo(50, 190);
        ctx.lineTo(250, 190);
        ctx.stroke();
        
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1;
        for (let y = 205; y < 330; y += 15) {
            ctx.beginPath();
            ctx.moveTo(50, y);
            ctx.lineTo(250, y);
            ctx.stroke();
        }
        ctx.restore();

        // Cylindrical object
        ctx.strokeRect(100, 310, 40, 20);

        // Rope
        // The rope is pulled from the truck horizontally, passes over the pulley, and goes down.
        // Let's assume the rope is pulled at the same level as the pulley for simplicity.
        ctx.beginPath();
        ctx.moveTo(190, 130); // Point from truck chassis
        ctx.lineTo(130, 130); // To the pulley
        ctx.arc(120, 130, 10, 0, Math.PI / 2); // Over the pulley
        ctx.lineTo(120, 310); // Down to the object
        ctx.stroke();

        // Label for Figure 甲
        ctx.fillText("甲", 150, 380);


        // --- Draw Figure 乙 (Yi) on the right ---

        // Define coordinate system parameters
        const originX = 500;
        const originY = 400;
        const xAxisLength = 320;
        const yAxisLength = 350;

        const scaleT = 3.5; // pixels per second
        const scaleP = 0.35; // pixels per Watt

        function tx(t) {
            return originX + t * scaleT;
        }

        function py(P) {
            return originY - P * scaleP;
        }

        // Draw axes
        ctx.beginPath();
        // Y-axis
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - yAxisLength);
        // Arrowhead for Y-axis
        ctx.lineTo(originX - 5, originY - yAxisLength + 10);
        ctx.moveTo(originX, originY - yAxisLength);
        ctx.lineTo(originX + 5, originY - yAxisLength + 10);
        // X-axis
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX + xAxisLength, originY);
        // Arrowhead for X-axis
        ctx.lineTo(originX + xAxisLength - 10, originY - 5);
        ctx.moveTo(originX + xAxisLength, originY);
        ctx.lineTo(originX + xAxisLength - 10, originY + 5);
        ctx.stroke();

        // Axis labels
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText("P/W", originX + 20, originY - yAxisLength + 5);
        ctx.fillText("t/s", originX + xAxisLength, originY + 25);
        ctx.font = '20px Arial';
        ctx.fillText("O", originX - 15, originY + 15);

        // Axis ticks and values
        ctx.textAlign = 'right';
        ctx.fillText("700", originX - 10, py(700));
        ctx.fillText("800", originX - 10, py(800));

        ctx.textAlign = 'center';
        ctx.fillText("50", tx(50), originY + 20);
        ctx.fillText("60", tx(60), originY + 20);

        // Draw the graph P vs t
        const p1 = 700;
        const p2 = 800;
        const t1 = 50;
        const t2 = 60;

        const xA = tx(0);
        const yA = py(p1);
        const xB = tx(t1);
        const yB = py(p1);
        const xC = tx(t2);
        const yC = py(p2);
        const xD_end = tx(85);
        const yD_end = py(p2);

        ctx.beginPath();
        // Segment AB
        ctx.moveTo(xA, yA);
        ctx.lineTo(xB, yB);
        // Segment BC
        ctx.lineTo(xC, yC);
        // Segment CD
        ctx.lineTo(xD_end, yD_end);
        ctx.stroke();

        // Dashed lines
        ctx.save();
        ctx.setLineDash([5, 3]);
        ctx.lineWidth = 1;
        // From P=800 to point C
        ctx.beginPath();
        ctx.moveTo(originX, yC);
        ctx.lineTo(xC, yC);
        ctx.stroke();
        // From B to t-axis
        ctx.beginPath();
        ctx.moveTo(xB, yB);
        ctx.lineTo(xB, originY);
        ctx.stroke();
        // From C to t-axis
        ctx.beginPath();
        ctx.moveTo(xC, yC);
        ctx.lineTo(xC, originY);
        ctx.stroke();
        ctx.restore();

        // Point labels
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText("A", xA + 10, yA - 15);
        ctx.fillText("B", xB - 5, yB + 20);
        ctx.fillText("C", xC + 10, yC - 10);
        ctx.fillText("D", (xC + xD_end) / 2, yD_end - 15);
        
        // Label for Figure 乙
        ctx.font = '20px Arial';
        ctx.fillText("乙", (tx(50) + tx(60)) / 2, originY + 40);

    </script>
</body>
</html>